<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>LabeledMarker Example: Toggling Marker Groups & Labels</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA-O3c-Om9OcvXMOJXreXHAxQGj0PqsCtxKvarsoS-iqLdqZSKfxS27kJqGZajBjvuzOBLizi931BUow"
      type="text/javascript"></script>
    <script src="../src/labeledmarker.js"></script>
    <script type="text/javascript">
    //<![CDATA[

    var iconBlue = new GIcon(); 
    iconBlue.image = 'http://gmaps-samples.googlecode.com/svn/trunk/markers/circular/greencirclemarker.png';
    iconBlue.shadow = '';
    iconBlue.iconSize = new GSize(32, 32);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(16, 16);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var iconRed = new GIcon(); 
    iconRed.image = 'http://gmaps-samples.googlecode.com/svn/trunk/markers/circular/bluecirclemarker.png';
    iconRed.shadow = '';
    iconRed.iconSize = new GSize(32, 32);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(16, 16);
    iconRed.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
    customIcons["restaurant"] = iconBlue;
    customIcons["bar"] = iconRed;
    var markerGroups = { "restaurant": [], "bar": []};

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(47.614495, -122.341861), 13);
        document.getElementById("restaurantCheckbox").checked = true;
        document.getElementById("barCheckbox").checked = true;
        document.getElementById("labelsCheckbox").checked = true;

        GDownloadUrl("markerdata.xml", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var label = markers[i].getAttribute("label");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, label, address, type);
            map.addOverlay(marker);
          }
        });
      }
    }

    function createMarker(point, name, label, address, type) {
      var marker = new LabeledMarker(point, {icon: customIcons[type], labelText: label, labelOffset: new GSize(-6, -10)});
      markerGroups[type].push(marker);
      var html = "<b>" + name + "</b> <br/>" + address;
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    function toggleGroup(type) {
      for (var i = 0; i < markerGroups[type].length; i++) {
        var marker = markerGroups[type][i];
        if (marker.isHidden()) {
          marker.show();
        } else {
          marker.hide();
        }
      } 
    }

    function toggleLabels() {
      var showLabels = document.getElementById("labelsCheckbox").checked;
      for (groupName in markerGroups) {
        for (var i = 0; i < markerGroups[groupName].length; i++) {
          var marker = markerGroups[groupName][i];
          marker.setLabelVisibility(showLabels);
        }
      }
    }

    //]]>
  </script>
  </head>

  <body style="font-family:Arial, sans serif" onload="load()" onunload="GUnload()">
   <input type="checkbox" id="labelsCheckbox" onclick="toggleLabels()" CHECKED /> Show Labels
   <br/>
    <div id="map" style="float:left; width: 300px; height: 250px; border: 1px solid black"></div>
    <div id="sidebar" style="float:left; width: 120px; height: 250px; border: 1px solid black">
   <input type="checkbox" id="restaurantCheckbox" onclick="toggleGroup('restaurant')" CHECKED />  
   Restaurants
   <br/>
   <input type="checkbox" id="barCheckbox" onclick="toggleGroup('bar')" CHECKED/>  
   Bars
    </div>
  </body>
</html>


